import echarts from 'echarts'

const install = function(Vue) {
    Object.defineProperties(Vue.prototype, {
        $chart: {
            get() {
                return {
                    line0:function(id,allData){
                        this.chart0 = echarts.init(document.getElementById(id));
                        // this.chart0.clear();
                        console.log(this.chart0)
                        var seriesData = [],seriesName = [];
                        $.each(allData.pay_from_total.list, function(index, item) {
                            if (parseFloat(item.settlement_price) > 0) {
                                if (parseFloat(item.settlement_price) < 25000) {
                                    seriesData.push({
                                        value: item.settlement_price,
                                        label: {
                                            normal: {
                                                position: 'left'
                                            }
                                        }
                                    });
                                } else {
                                    seriesData.push(item.settlement_price)
                                }
                            } else {
                                if (parseFloat(item.settlement_price) > -25000) {

                                    seriesData.push({
                                        value: item.settlement_price,
                                        label: {
                                            normal: {
                                                position: 'right'
                                            }
                                        }
                                    });
                                } else {
                                    seriesData.push(item.settlement_price)
                                }


                            }
                            seriesName.push(item.pay_from_cn)
                        })
                        option = {
                            color: 'rgb(94, 62, 235)',
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '20%',
                                right: '10%',
                                bottom: '3%',
                
                                containLabel: true
                            },
                            xAxis: {
                                show: false,
                                type: 'value',
                                position: 'bottom',
                                splitLine: {
                                    show: false
                                },
                
                            },
                            yAxis: {
                                axisLine: {
                                    onZero: true,
                                    lineStyle: {
                                        type: 'dashed',
                                        color: 'rgba(163, 135, 235, 0.9)'
                                    }
                                },
                                type: 'category',
                
                                axisLabel: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                boundaryGap: true,
                                data: seriesName
                            },
                            series: [{
                                name: '',
                                type: 'bar',
                                stack: '',
                                barCategoryGap: 10,
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: '{b} {c}',
                
                                    }
                                },
                                data: seriesData
                            }]
                        };
                

                        this.chart0.setOption(option);
                    },
                    //画一条简单的线
                    line1: function (id,allData) {
                        this.chart = echarts.init(document.getElementById(id));
                        this.chart.clear();
                        var total_pay=[];

                        $.each(allData.pay_from_total.list, function(index, item) {
                            total_pay.push({
                                name: item.pay_from_cn,
                                value: item.total_price
                            })
                        });
                        let color = ['rgb(94, 62, 235)', 'rgb(0,198,230)', 'rgb(150,230,186)', 'rgb(254,220,105)', 'rgb(255,161,131)',
                            'rgb(254,117,148)', 'rgb(234,189,241)', 'rgb(144,132,255)'
                        ];
                        const optionData = {
                            legend: {
                                orient: 'vertical',
                                right: 40,
                                top: 60,
                                bottom: 0,
                                data: total_pay,
                                formatter: function(name) {
                                    var total = 0;
                                    var target;
                                    for (var i = 0, l = total_pay.length; i < l; i++) {
                                        total += parseFloat(total_pay[i].value);
                                        if (total_pay[i].name == name) {
                                            target = total_pay[i].value;
                                        }
                                    }
                                    return name + '  ' + ((target / total) * 100).toFixed(2) + '%' + '  ' + target;
                                }
                            },
                            series: [{
                                name: '商品订单消费实付金额与支付方式',
                                type: 'pie',
                                radius: ['40%', '60%'],
                                center: ['30%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        formatter: '{b} \n {d}%',
                                        textStyle: {
                                            fontSize: '14'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: total_pay
                            }],
                            color: color
                        };

                        this.chart.setOption(optionData);
                    },
                    orderEchart:function(obj, data) {
                        console.log('data', data,obj)
                        var target = echarts.init(document.getElementById(obj));
                        var color = ['rgb(94, 62, 235)', 'rgb(0,198,230)', 'rgb(150,230,186)', 'rgb(254,220,105)', 'rgb(255,161,131)'];

                        var option = {
                            legend: {
                                orient: 'vertical',
                                top: '64%',
                                data: data,
                                formatter: function (name) {
                                    var total = 0;
                                    var targetn;
                                    for (var i = 0; i < data.length; i++) {
                                        total += parseFloat(data[i].value);
                                        if (data[i].name == name) {
                                            targetn = data[i].value;
                                            console.log(targetn)
                                        }
                                    }
                                    if (total != 0) {
                                        return name + '  ' + ((targetn / total) * 100).toFixed(2) + '%' + '  ' + targetn;
                                    } else {
                                        return name + '  ' + '0%' + '  ' + targetn;
                                    }

                                }
                            },
                            series: [{
                                name: '',
                                type: 'pie',
                                radius: ['40%', '60%'],
                                center: ['50%', '33%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        formatter: '{b} \n {d}%',
                                        textStyle: {
                                            fontSize: '14'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: data
                            }],
                            color: color
                        };
                        target.setOption(option);
                    },
                }
            }
        }
    })
}

export default {
    install
}